<template>
  <div class='container'>

    <!-- 单选题 -->
    <div v-if="preDetails.questionType==='1'">
      <div class="title">
        <span>【题型】：单选题</span>
        <span>【编号】：{{preDetails.id}}</span>
        <span>【难度】：
          <label style="font-weight:400"
                 v-if="preDetails.difficulty==='1'">简单</label>
          <label v-if="preDetails.difficulty==='2'">一般</label>
          <label v-if="preDetails.difficulty==='3'">困难</label>
        </span>
        <span>【标签】：{{preDetails.tags}}</span>
      </div>
      <br>
      <div class="title">
        <span>【学科】：{{preDetails.subject}}</span>
        <span>【目录】：{{preDetails.catalog}}</span>
        <span>【方向】：{{preDetails.direction}}</span>
      </div>
      <br>
      <hr>
      <!-- 题干 -->
      <div>
        <div>
          <span>
            【题干】：
            <span v-html="preDetails.question"></span>
          </span>
        </div>
        <div>
          <div>单选题选项：(以下选中的选项为正确答案)</div>
          <div v-for="(item,index) in preDetails.options"
               :key="index">
            <el-radio v-model="radio"
                      :label="item.title"></el-radio>
          </div>

        </div>
      </div>
      <hr>
      <!-- 参考答案 -->
      <div>
        <span>
          【参考答案】：
          <span>
            <el-button type="danger"
                       size="small"
                       style="display:inline"
                       @click="isVideoShow=true">视频答案预览</el-button>
          </span>
          <el-dialog v-if="isVideoShow"
                     title="参考视频"
                     append-to-body
                     :visible.sync="isVideoShow"
                     width="30%">
            <video controls
                   style="width:400px"
                   v-if="preDetails.videoURL.startsWith('https')"
                   :src="preDetails.videoURL"></video>
            <span v-else>暂无播放视频</span>
            <span slot="footer">
              <el-button @click=" isVideoShow= false">关闭</el-button>
            </span>
          </el-dialog>
        </span>
      </div>
      <hr>
      <!-- 答案解析 -->
      <div>
        <span>
          【答案解析】：
          <span v-html="preDetails.answer"></span>
        </span>
      </div>
      <hr>
      <!-- 题目备注 -->
      <div>
        <span>
          【答案解析】：{{preDetails.remarks}}
        </span>
      </div>
    </div>

    <!-- 多选题 -->
    <div v-if="preDetails.questionType==='2'">
      <div class="title">
        <span>【题型】：多选题</span>
        <span>【编号】：{{preDetails.id}}</span>
        <span>【难度】：
          <label style="font-weight:400"
                 v-if="preDetails.difficulty==='1'">简单</label>
          <label v-if="preDetails.difficulty==='2'">一般</label>
          <label v-if="preDetails.difficulty==='3'">困难</label>
        </span>
        <span>【标签】：{{preDetails.tags}}</span>
      </div>
      <br>
      <div class="title">
        <span>【学科】：{{preDetails.subject}}</span>
        <span>【目录】：{{preDetails.catalog}}</span>
        <span>【方向】：{{preDetails.direction}}</span>
      </div>
      <br>
      <hr>
      <!-- 题干 -->
      <div>
        <div>
          <span>
            【题干】：
            <span v-html="preDetails.question"></span>
          </span>
        </div>
        <div>
          <div>多选题选项：(以下选中的选项为正确答案)</div>
          <el-checkbox-group v-model="checkList">
            <div v-for="(item,index) in preDetails.options"
                 :key="index">
              <el-checkbox :label="item.title"></el-checkbox>
            </div>

          </el-checkbox-group>
        </div>
      </div>
      <hr>
      <!-- 参考答案 -->
      <div>
        <span>
          【参考答案】：
          <span>
            <el-button type="danger"
                       size="small"
                       style="display:inline"
                       @click="isVideoShow=true">视频答案预览</el-button>
          </span>
          <el-dialog v-if="isVideoShow"
                     title="参考视频"
                     append-to-body
                     :visible.sync="isVideoShow"
                     width="30%">
            <video controls
                   style="width:400px"
                   :src="preDetails.videoURL"></video>
            <span slot="footer">
              <el-button @click=" isVideoShow= false">关闭</el-button>
            </span>
          </el-dialog>
        </span>
      </div>
      <hr>
      <!-- 答案解析 -->
      <div>
        <span>
          【答案解析】：
          <span v-html="preDetails.answer"></span>
        </span>
      </div>
      <hr>
      <!-- 题目备注 -->
      <div>
        <span>
          【答案解析】：{{preDetails.remarks}}
        </span>
      </div>
    </div>

    <!-- 简答题 -->
    <div v-if="preDetails.questionType==='3'">
      <div class="title">
        <span>【题型】：简答题</span>
        <span>【编号】：{{preDetails.id}}</span>
        <span>【难度】：
          <label style="font-weight:400"
                 v-if="preDetails.difficulty==='1'">简单</label>
          <label v-if="preDetails.difficulty==='2'">一般</label>
          <label v-if="preDetails.difficulty==='3'">困难</label>
        </span>
        <span>【标签】：{{preDetails.tags}}</span>
      </div>
      <br>
      <div class="title">
        <span>【学科】：{{preDetails.subject}}</span>
        <span>【目录】：{{preDetails.catalog}}</span>
        <span>【方向】：{{preDetails.direction}}</span>
      </div>
      <br>
      <hr>
      <!-- 题干 -->
      <div>
        <div>
          <span>
            【题干】：
            <span v-html="preDetails.question"></span>
          </span>
        </div>
        <!-- <div>
          <div>单选题选项：(以下选中的选项为正确答案)</div>
          <div>
            <el-radio v-model="radio"
                      label="1">1</el-radio>
          </div>
          <div>
            <el-radio v-model="radio"
                      label="2">2</el-radio>
          </div>
          <div>
            <el-radio v-model="radio"
                      label="3">3</el-radio>
          </div>
          <div>
            <el-radio v-model="radio"
                      label="4">4</el-radio>
          </div>
        </div> -->

      </div>
      <hr>
      <!-- 参考答案 -->
      <div>
        <span>
          【参考答案】：
          <span>
            <el-button type="danger"
                       size="small"
                       style="display:inline"
                       @click="isVideoShow=true">视频答案预览</el-button>
          </span>
          <el-dialog v-if="isVideoShow"
                     title="参考视频"
                     append-to-body
                     :visible.sync="isVideoShow"
                     width="30%">
            <video controls
                   style="width:400px"
                   :src="preDetails.videoURL"></video>
            <span slot="footer">
              <el-button @click=" isVideoShow= false">关闭</el-button>
            </span>
          </el-dialog>
        </span>
      </div>
      <hr>
      <!-- 答案解析 -->
      <div>
        <span>
          【答案解析】：
          <span v-html="preDetails.answer"></span>
        </span>
      </div>
      <hr>
      <!-- 题目备注 -->
      <div>
        <span>
          【答案解析】：{{preDetails.remarks}}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions'
export default {
  name: 'QuestionsPreview',
  props: {
    // preId: {
    //   type: Object,
    //   required: true
    // },
    preId: {
      type: [Number, String],
      required: true
    }
  },
  data() {
    return {
      isVideoShow: false,
      radio: '',
      checkList: [],
      preDetails: {}
    }
  },
  created() {
    this.getQuestionDetails()
  },
  methods: {
    async getQuestionDetails() {
      try {
        let { data: res } = await detail({ id: this.preId })
        this.preDetails = res
        if (this.preDetails.questionType == 1) {
          let arr = this.preDetails.options.filter((val) => {
            return val.isRight === 1
          })
          arr.forEach((val) => {
            this.radio = val.title
          })
        }
        if (this.preDetails.questionType == 2) {
          let checkItem = this.preDetails.options.filter((val) => {
            return val.isRight === 1
          })

          checkItem.forEach((item) => {
            this.checkList.push(item.title)
          })
        }
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style scoped lang='less'>
.title {
  span {
    display: inline-block;
    width: 180px;
  }
}
</style>
